<template>
  <div>
    <div class="F1">
      <div class="container">
        <h1>找医院</h1>
        <div :class="{ click: selected !== 0 }">
          <div class="menu">
            <div class="select">
              <div @click="selected = 1">
                <span v-html="`${qdks}` ? `${qdks}` : '全部科室'"></span>
                <img
                  src="@/assets/images/Hospital/right.png"
                  :class="{ active: selected == 1 }"
                />
              </div>
              <b>|</b>
              <div @click="selected = 2">
                <span>综合排序</span>
                <img
                  src="@/assets/images/Hospital/right.png"
                  :class="{ active: selected == 2 }"
                />
              </div>
            </div>
            <div class="show">
              <div v-show="selected == 1">
                <div @click="active" v-if="data">
                  <span @click="qdks = ''">全部科室</span>
                  <span
                    v-for="{ key, ks } in data.data"
                    :key="key"
                    @click="qdks = ks"
                    >{{ ks }}</span
                  >
                </div>
                <div class="btn" @click="selected = 0">
                  <div class="no">取消</div>
                  <div class="yes" @click="selectks">确定</div>
                </div>
              </div>
              <div v-show="selected == 2">
                <ul @click="active2">
                  <li class="active" @click="key = ''">
                    <p>综合排序</p>
                    <img src="@/assets/images/Hospital/select.png" alt="" />
                  </li>
                  <li @click="key = 1">
                    <p>医保报销</p>
                    <img src="@/assets/images/Hospital/select.png" alt="" />
                  </li>
                  <li @click="key = 2">
                    <p>等级</p>
                    <img src="@/assets/images/Hospital/select.png" alt="" />
                  </li>
                </ul>
                <div class="btn" @click="selected = 0">
                  <div class="no">取消</div>
                  <div class="yes" @click="paixu">确定</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 16vh" v-if="hosData">
      <HosCard
        @click.native="$router.push(`/detail?${hos.bid}`)"
        v-for="(hos, i) in hosData.data"
        :key="i"
        :zhos="hos"
      ></HosCard>
    </div>
    <div
      style="
        height: 2vh;
        text-align: center;
        color: #666;
        padding-bottom: 10vh;
        line-height: 3vh;
      "
    >
      没有更多数据
    </div>
  </div>
</template>
  
  <script>
import HosCard from "@/components/HosCard.vue";
export default {
  components: {
    HosCard,
  },
  data() {
    return {
      selected: 0,
      data: null,
      hosData: null,
      qdks: "全部科室",
      key: "",
    };
  },
  mounted() {
    document.addEventListener("mouseup", (e) => {
      const userCon = document.querySelector(".menu");
      if (userCon && !userCon.contains(e.target)) {
        this.selected = 0;
      }
    });
    this.axios.get("/users/index_tese").then((res) => {
      this.data = res.data;
    });
    this.axios(`/users/hospital`).then((res) => {
      this.hosData = res.data;
    });
  },
  methods: {
    active(e) {
      if (e.target.nodeName !== "SPAN") return;
      let spans = document.querySelectorAll(".show span");
      spans.forEach((span) => {
        span.classList.remove("active");
      });
      e.target.classList.add("active");
    },
    active2(e) {
      let lis = document.querySelectorAll(".show li");
      lis.forEach((li) => {
        li.classList.remove("active");
      });
      e.target.classList.add("active");
    },
    selectks() {
      this.axios(`/users/keshi_xu/${this.qdks}`).then((res) => {
        this.hosData = res.data;
      });
    },
    paixu() {
      this.axios(`/users/keshi_xu?vl=${this.key}`).then((res) => {
        this.hosData = res.data;
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.F1 {
  padding: 0;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  background-color: #fff;
  .container {
    > h1 {
      text-align: center;
    }
    > div {
      &.click::after {
        content: "";
        position: absolute;
        height: 100vh;
        width: 100vw;
        background-color: #92929220;
      }
    }
  }
  .menu {
    // width: 98%;
    position: relative;
    > .select {
      display: flex;
      align-items: center;
      > div {
        display: flex;
        justify-content: center;
        align-content: center;
        width: 50%;
        padding: 1vh;
        height: 3vh;
        > img {
          display: block;
          width: 8%;
          margin: 0 1vw;
          &.active {
            transform: rotate(90deg);
          }
        }
        > span {
          line-height: 3vh;
        }
      }
      > b {
        color: #d8d8d8;
      }
    }
    > .show {
      > div {
        &:nth-child(1) {
          display: flex;
          flex-direction: column;
          & > div:first-child {
            max-height: 26vh;
            overflow: auto;
            padding: 3vw;
            > span {
              display: inline-block;
              width: fit-content;
              margin: 1.5%;
              padding: 1vh 3vh;
              text-align: center;
              background-color: #f0f0f0;
              border-radius: 0.75em;
              color: #333;
              &.active {
                background-color: #1397d7;
                color: #fff;
              }
            }
          }
        }
        > ul > li {
          border-bottom: 1px solid #d8d8d8;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 2vh 3vw;
          height: 2vh;
          > p {
            color: #333;
            pointer-events: none;
          }
          > img {
            width: 5%;
            display: none;
            pointer-events: none;
          }
          &.active {
            > p {
              color: #1397d7;
            }
            > img {
              display: block;
            }
          }
        }

        > .btn {
          display: flex;
          z-index: 1;
          > div {
            width: 50%;
            text-align: center;
            padding: 2vh;
            &:nth-child(2) {
              background-color: #1397d7;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
ul {
  margin: 0;
  padding: 0;
}

.hidden {
  display: none;
}
</style>
